import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  ExternalLink, 
  Copy, 
  Check,
  Lightbulb,
  Target,
  ArrowRight,
  Star,
  BookOpen
} from 'lucide-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { DesignPattern } from '@/types';

interface ExamplesTabProps {
  pattern: DesignPattern;
}

const ExamplesTab: React.FC<ExamplesTabProps> = ({ pattern }) => {
  const [copiedCode, setCopiedCode] = useState<string | null>(null);

  const handleCopyCode = async (code: string, index: number) => {
    try {
      await navigator.clipboard.writeText(code);
      setCopiedCode(index.toString());
      setTimeout(() => setCopiedCode(null), 2000);
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  return (
    <div className="min-h-full bg-gray-50">
      <div className="max-w-6xl mx-auto p-6 space-y-8">
        {/* Real World Examples */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <div className="flex items-center space-x-3 mb-6">
            <div className="p-2 bg-primary-100 rounded-lg">
              <Target className="w-6 h-6 text-primary-600" />
            </div>
            <h2 className="text-2xl font-bold text-gray-900">实际应用场景</h2>
          </div>
          
          <div className="space-y-6">
            {pattern.realWorldExamples.map((example, index) => (
              <motion.div
                key={index}
                className="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ y: -2 }}
              >
                <div className="p-6">
                  <div className="flex items-start justify-between mb-4">
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold text-gray-900 mb-2">
                        {example.title}
                      </h3>
                      <p className="text-gray-600 leading-relaxed">
                        {example.description}
                      </p>
                    </div>
                    
                    <div className="flex items-center space-x-2 ml-4">
                      <motion.button
                        onClick={() => handleCopyCode(example.code, index)}
                        className="p-2 text-gray-600 hover:text-gray-900 transition-colors"
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        title="复制代码"
                      >
                        {copiedCode === index.toString() ? (
                          <Check className="w-4 h-4 text-green-600" />
                        ) : (
                          <Copy className="w-4 h-4" />
                        )}
                      </motion.button>
                      
                      <motion.button
                        className="p-2 text-gray-600 hover:text-gray-900 transition-colors"
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        title="在新窗口打开"
                      >
                        <ExternalLink className="w-4 h-4" />
                      </motion.button>
                    </div>
                  </div>
                  
                  <div className="bg-gray-900 rounded-lg overflow-hidden">
                    <div className="bg-gray-800 px-4 py-2 flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                        <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
                        <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                      </div>
                      <span className="text-gray-400 text-sm font-mono">TypeScript</span>
                    </div>
                    
                    <SyntaxHighlighter
                      language="typescript"
                      style={tomorrow}
                      customStyle={{
                        margin: 0,
                        padding: '1rem',
                        fontSize: '13px',
                        lineHeight: '1.5',
                        background: '#1a202c'
                      }}
                      showLineNumbers
                      wrapLines
                    >
                      {example.code}
                    </SyntaxHighlighter>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.section>

        {/* Best Practices */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          <div className="flex items-center space-x-3 mb-6">
            <div className="p-2 bg-yellow-100 rounded-lg">
              <Lightbulb className="w-6 h-6 text-yellow-600" />
            </div>
            <h2 className="text-2xl font-bold text-gray-900">最佳实践</h2>
          </div>
          
          <div className="bg-yellow-50 rounded-lg p-6 border border-yellow-200">
            <div className="grid md:grid-cols-2 gap-4">
              {pattern.bestPractices.map((practice, index) => (
                <motion.div
                  key={index}
                  className="flex items-start space-x-3 p-4 bg-white rounded-lg border border-yellow-200 hover:shadow-md transition-shadow"
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.1 }}
                  whileHover={{ x: 5 }}
                >
                  <Star className="w-5 h-5 text-yellow-500 mt-0.5 flex-shrink-0" />
                  <span className="text-yellow-800 font-medium">{practice}</span>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.section>

        {/* Pattern Relationships */}
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          <div className="flex items-center space-x-3 mb-6">
            <div className="p-2 bg-blue-100 rounded-lg">
              <BookOpen className="w-6 h-6 text-blue-600" />
            </div>
            <h2 className="text-2xl font-bold text-gray-900">相关模式</h2>
          </div>
          
          <div className="grid md:grid-cols-3 gap-4">
            {[
              { name: '工厂模式', relation: '经常一起使用', type: 'creational' },
              { name: '策略模式', relation: '可以组合使用', type: 'behavioral' },
              { name: '观察者模式', relation: '实现机制相似', type: 'behavioral' }
            ].map((related, index) => (
              <motion.div
                key={index}
                className="p-4 bg-white rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ scale: 1.02 }}
              >
                <div className="flex items-center space-x-3">
                  <div className={`w-3 h-3 rounded-full ${
                    related.type === 'creational' ? 'bg-green-500' :
                    related.type === 'structural' ? 'bg-blue-500' :
                    'bg-purple-500'
                  }`}></div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-gray-900">{related.name}</h3>
                    <p className="text-sm text-gray-600">{related.relation}</p>
                  </div>
                  <ArrowRight className="w-4 h-4 text-gray-400" />
                </div>
              </motion.div>
            ))}
          </div>
        </motion.section>

        {/* Learning Path */}
        <motion.section
          className="bg-gradient-to-r from-primary-500 to-secondary-600 rounded-lg p-6 text-white"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
        >
          <h2 className="text-xl font-bold mb-4">学习路径建议</h2>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h3 className="font-semibold mb-2">初学者</h3>
              <ul className="space-y-1 text-primary-100">
                <li>• 理解基本概念和原理</li>
                <li>• 查看代码实现示例</li>
                <li>• 运行交互式演示</li>
                <li>• 学习最佳实践</li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold mb-2">进阶者</h3>
              <ul className="space-y-1 text-primary-100">
                <li>• 分析实际应用场景</li>
                <li>• 理解模式间的关系</li>
                <li>• 掌握组合使用技巧</li>
                <li>• 避免常见陷阱</li>
              </ul>
            </div>
          </div>
        </motion.section>
      </div>
    </div>
  );
};

export default ExamplesTab;
